<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="user-scalable=no, 
			widtn=device-width,initial-scale=1.0, maximum-scale=1.0" >
		<title>I'm QQ - 每一天，乐在沟通</title>
	</head>
	<link rel="icon" href="favicon.ico" type="image/x-icon" />
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#topdiv-1{ width: 100vw;  height: 70vh; background-image: url(img/bg_dt.jpg);
					  background-position: center; }
			#div-bottom{ width: 100%; height: 600px; margin-top: 18%; background: rgb(31,31,31);}
				
			.logo {display:inline-block; margin-left: 10%; margin-top:20px; width: 10%; height: 100px; }
			
			#top-ul-1 li{
				width: 20%; height: 50px; text-align: center; line-height: 50px;      /*水平居中*/
				display:inline-block;	/*将li标签转换成块*/ list-style: none;
			}
			
			#top-ul-2 li{
				 width: 100%; height: 60px; text-align: center; line-height: 60px;      /*水平居中*/
				display:inline-block;	/*将li标签转换成块*/  list-style: none; 
				border-radius: 30px 30px;  background: rgb(37,167,242);
			}
			#top-ul-3 li{
				 width: 30%;  height:60px;    list-style: none; 
				 display:inline-block;	/*将li标签转换成块*/  
			}
			
			#top-ul-1 { display:inline-block;width: 30%; height: 140px; 
			 margin-left: 5%;}
			
			#top-ul-2 { display:inline-block;width: 10%; height: 60px;  margin-left: 10%; }
			
			#top-ul-3 { display:inline-block;width: 18.75%; height: 60px;  margin-left: 5%;  }
			
			#ul-bottom { position: absolute; list-style: none; float: left;  margin-left: 10%;
			 width: 80%;height: 20px; margin-top: 19%; text-align: center; border-top: 1px solid grey;}
			
			#ul-bottom p{color: grey;}
			
			
			
			#table-1 {   padding: 40px;  float: right; width: 48%;   margin-right:2%;}
			#table-1 th{   margin: 40px;width: 30px;height: 55px;font-size: 17.6px;color:grey; text-align:left;}
			#table-1 a{  float: left; color:grey; text-decoration: none; width: 60%;height: 35px;font-size: 14.4px;text-align: left;}
			#table-1 a:hover{color: white;}
			
			#ul-bottom-left-2{ position: absolute;  list-style: none; 
			width: 32%; height: 300px; margin-top: 2%; margin-left: 10%; }
			
			#ul-bottom-left-2 li{ display: inline-block; 
			 width: 18%;height: 30px; top: 80%; margin-top: 30%; }
			 
			 #ul-bottom-left-2 li a{ text-decoration: none; font-size: 16px; color: grey;}
			 #ul-bottom-left-2 li a:hover{ color:rgb(37,167,242) ;}
			 
			#ul-bottom-left  {  list-style: none;  float: left; margin-left: 10%; margin-top: 3%;
			 color: grey;  font-size: 17.6px; }
			
			#zc a{ text-decoration: none; color: white; font-size: 24px;}
			
			#top-ul-1  li a{
				display: block;
				text-decoration: none;
				color: white;
				font-size: 19.2px;
			}
			
			#renshu {position: absolute; left: 80.5%; top:65px;  text-decoration: none;
				color: white;font-size: 16px; }
			
			#top-ul-1  a{
				display: block;text-decoration: none;
				color: white;font-size: 19.2px;
			}
			#top-ul-3 a{ position: absolute; margin-top: 15px; text-decoration: none;
				color: white;font-size: 17.6px;}
				
			
			#top-ul-3 a:hover{color: rgb(37,167,242); }
			
			#top-ul-2 li:hover{ background: rgb(40,180,255);}
			
			#top-ul-1 a:hover{
				background: rgb(37,167,242);
			}
			
			.div-sec{ width: 80%; height: 2000px; 
			  		margin-top: 90px; margin-left: 10%; }
			  		
			.div-sec li { width: 100%; height: 200px;  
						}
						
			.sec-ul-1, .sec-ul-2, .sec-ul-3, .sec-ul-4, .sec-ul-5, .sec-ul-6, .sec-ul-7, .sec-ul-8, .sec-ul-9, .sec-ul-10{
				height: 220px; border: 1px solid lightgrey;}	
								
			.sec-ul-1 li, .sec-ul-2 li, .sec-ul-3 li, .sec-ul-4 li, .sec-ul-5 li, .sec-ul-6 li, .sec-ul-7 li, .sec-ul-8 li,
			 .sec-ul-9 li, .sec-ul-10 li {
				width: auto; height: 40px;  display: inline-block; font-size: 16px; }
				 
			.source { float: right; margin-right: 40px; margin-top: 30px; }
			.date{ float: left; margin-left: 40px; margin-top: 30px;}
			.title { width: 100%;  margin-left: 25%; margin-top: 3.6%; }
			.introduce{float: left;}
			.span1{float: left; width: 100%; margin-left: 20%;margin-top: 2%; font-weight: 100;}
			.span2{float: left; width: 100%;margin-left: 16%;margin-top: 1%; font-weight: 100;}
			
			 span:hover{font-weight:200;}
			.title span:hover{color: deepskyblue; }
			
			#div-move {
				width: 22%; height: 70px;
				/*border: 1px solid red;*/
				position: absolute;
				margin-left: 11%;
				margin-top: 8%;
				background: url(img/dt.png) 0 0;
				background-size: 100% ;
			}			
			

			
			
			
		</style>
		<header id="header-1">
		</header>
	<body>
			<nav id="nav-1">				
				<div id="topdiv-1">
					<div class="logo">
						<img src="img/dt_logo.png" />
					</div> 
					<ul id="top-ul-1">
						<li><a href="qq_sy.html" target="_blank">首页</a></li>
						<li><a href="download.html" target="_blank">下载</a></li>
						<li><a href="qq_dt.html" target="_blank">动态</a></li>
					</ul>
						<!--<a class="zc" href="#"  target="_blank"><img src="img/zhuce1.png"/>注册</a>-->
							<ul id="top-ul-2">
								<li  id="zc"><a href="zh_zc.html" target="_blank">注册</a></li>
							</ul>
								<ul id="top-ul-3">
									<li><a href="#" target="_blank">QQ会员</a> </li>
									<li><a href="#" target="_blank">QQ安全</a> </li>
									<li id="login"><a href="#" target="_blank">登录</a></li><br />
								    <a  id="renshu" href="#" target="_blank">当前在线人数: 227,763,015</a>
								</ul>
						</div>
			</nav>
			
				<section id="section-1">
					<div class="div-sec">
					<ul class="sec-ul-1">
								<li class="date"><span>2017-12-01</span></li>
								<li class="source"><span>搜狐</span></li>
								<li class="title"><span><h1>QQ跨界维密，AR会是年轻人的潮流新入口吗？</h1></span></li>
								<li class="introduce"><span class="span1">QQ的跨界合作大多是年轻人喜闻乐见的时尚年轻品牌，对于年轻人来说非常有号召力，而长期反复的营销推广和品牌跨界，</span><br />
									<span class="span2">则是潜移默化地提升年轻群体的打开率——对于QQ来说，这是打开年轻人的一个新的入口。</span></li>
						</ul>
						 
						<ul class="sec-ul-2">
								<li class="date"><span>2017-11-01</span></li>
								<li class="source"><span>凤凰网</span></li>
								<li class="title"><span><h1>视频聊天连脸都能换？手机QQ最新版体验</h1></span></li>
								<li class="introduce"><span class="span1">手机QQ在新版本给用户带来了拍照和视频的一系列新功能，例如视频换脸这类令人惊呼脑洞大开的功能！那它到底好玩吗？</span><br />
									<span class="span2">一起来看看。</span></li>
						</ul>
						
						<ul class="sec-ul-3">
								<li class="date"><span>2017-10-27</span></li>
								<li class="source"><span>爱范儿</span></li>
								<li class="title"><span><h1>实测：手机QQ这个新功能，让我斗图再也找不到对手了！</h1></span></li>
								<li class="introduce"><span class="span1">QQ 群开启了斗图模式，平常保存的表情包都发完了，不能快速找到应战的表情包，你甘心就这样败下阵来？莫慌，</span><br />
									<span class="span2">手机 QQ 有个功能，可以治好尬聊症哦！</span></li>
						</ul>
						
						<ul class="sec-ul-4">
								<li class="date"><span>2017-08-16</span></li>
								<li class="source"><span>DONEWS</span></li>
								<li class="title"><span><h1>手机QQ V7.1.8的一项小优化，揭示“文字习得”进化史</h1></span></li>
								<li class="introduce"><span class="span1">手机QQ提供了一种很快速且很精准的解决办法——图中文字提取功能。这是腾讯优图实验室提供的OCR文字识别技术，无论</span><br />
									<span class="span2">你在哪里看到的文字，拍张照片，手机QQ就能把它们瞬间转化为可复制、编辑的文字，还能进行中英文互译。</span></li>
						</ul>
						
						<ul class="sec-ul-5">
								<li class="date"><span>2017-07-24</span></li>
								<li class="source"><span>站长之家</span></li>
								<li class="title"><span><h1>手机QQ V7.1.5正式上线，打造你的个性标签墙</h1></span></li>
								<li class="introduce"><span class="span1">7月19日，手机QQ V7.1.5 正式上线，针对个性化及支付做了更新优化。新版手机QQ新增个性标签，用户可为标签添加图</span><br />
									<span class="span2">片，打造专属的个性标签墙；支付方面，新版本首次支持好友代付，给用户带来更便捷的支付体验。</span></li>
						</ul>
						
						<ul class="sec-ul-6">
								<li class="date"><span>2017-07-19</span></li>
								<li class="source"><span>和讯网</span></li>
								<li class="title"><span><h1>所有不相信二次元的人，都应当去一次QQJOY</h1></span></li>
								<li class="introduce"><span class="span1">QQ正在享受搭建舞台的优势，它终于不再畏惧被诟病为低幼化的平台，恰恰相反，只有取悦了年轻人的产品，才有能力去为</span><br />
									<span class="span2">年轻人的未来背书。</span></li>
						</ul>
						
						<ul class="sec-ul-7">
								<li class="date"><span>2017-06-21</span></li>
								<li class="source"><span>腾讯网</span></li>
								<li class="title"><span><h1> 腾讯QQ全城助力科技公益项目摘戛纳创意节中国首金了！</h1></span></li>
								<li class="introduce"><span class="span1">来自腾讯的科技公益项目QQ全城助力“人脸寻亲”，在2017戛纳国际创意节“Cyber Lions”竞赛单元摘得“Use of Social Data & </span><br />
									<span class="span2">Insight”金狮奖。该项目同时还斩获“Mobile Lions”竞赛单元铜狮奖，腾讯成为本届戛纳国际创意节首个夺得一金一铜两项大奖...</span></li>
						</ul>
						
						<ul class="sec-ul-8">
								<li class="date"><span>2016-12-12</span></li>
								<li class="source"><span>站长之家</span></li>
								<li class="title"><span><h1>短视频双人动态挂件上线，手机QQ V6.6.1欢乐也成双</h1></span></li>
								<li class="introduce"><span class="span1">手机QQ一直在用户的娱乐化体验上不断发力。在版本V6.6.1中更是基于短视频自动识别双人人脸的技术，增添了更多双人动</span><br />
									<span class="span2">态挂件。支持“樱桃小丸子”“黑人爆炸头”等数十种不同风格的实时动态挂件，随挂件还配有不同的配音，更添加几分趣味。</span></li>
						</ul>
						
						<ul class="sec-ul-9">
								<li class="date"><span>2016-11-25</span></li>
								<li class="source"><span>IT之家</span></li>
								<li class="title"><span><h1>互联网时代聊天短视频录制为何只有7秒？</h1></span></li>
								<li class="introduce"><span class="span1">互联网碎片化的痕迹越来越重，短视频也因此变得火热起来。纵观市场上的短视频应用，发现一个非常有趣的现象，
									常用的短</span><br/>
									<span class="span2">视频录制时长都在7秒钟左右：微信小视频6秒，秒拍则是10秒，手机QQ短视频也将其录制长度由之前的8秒变为7秒，难道这是...</span></li>
						</ul>
							
							<ul class="sec-ul-10">
								<li class="date"><span>2016-11-25</span></li>
								<li class="source"><span>IT之家</span></li>
								<li class="title"><span><h1>QQ全城助力斩获ONE SHOW中华创意奖两项大奖！</h1></span></li>
								<li class="introduce"><span class="span1">重磅捷讯！在艾菲奖上斩获多项营销传播大奖的腾讯QQ ，凭借 “QQ全城助力”这一全民公益项目，在 2016 ONE SHOW中华</span><br />
									<span class="span2">创意奖颁奖典礼的舞台上又获两枚大奖： “产品与服务创新－线上平台与服务创新”以及 “社会化媒体－社会化媒体数据应用”两项...</span></li>
						</ul>
					</ul>
					</div>
					
					<div id="div-bottom">
						<div id="div-bottom-left">
							<div id="div-move">
								<!--<img src="img/dynamic/2.png" />-->
							</div>
							<ul id="ul-bottom-left">
								<li >了解热门产品</li>
							</ul>
								<ul id="ul-bottom-left-2">
									<!--<li id="logo-bottom"><img src="img/dynamic/2.png" /> </li>-->
									<li><a id="iphone" href="#">QQ 手机版</a></li>
									<li><a id="pc" href="#">QQ PC版</a></li>
									<li><a id="mac" href="#">QQ MAC版</a></li>
									<li><a id="pad" href="#">QQ Pad版</a></li>
								</ul>
						</div>
						<table id="table-1">
							<tr>
								<th>QQ安全</th>
								<th>帮助反馈</th>
								<th>友情链接</th>
								<th>友情链接</th>
							</tr>
								<tr>
									<td><a href="#">安全中心</a></td>
									<td><a href="#">腾讯客服</a></td>
									<td><a href="#">兴趣部落</a></td>
									<td><a href="#">腾讯视频</a></td>
								</tr>
								<tr>
									<td><a href="#">冻结账号</a></td>
									<td><a href="#">反馈问题</a></td>
									<td><a href="#">QQ群</a></td>
									<td><a href="#">腾讯体验中心</a></td>
								</tr>
								<tr>
									<td><a href="#">举报恶意行为</a></td>
									<td><a href="#">腾讯微博</a></td>
									<td><a href="#">QQ音乐</a></td>
									<td><a href="#">腾讯电脑管家</a></td>
								</tr>
								<tr>
									<td><a href="#">回复好友和群</a></td>
									<td><a href="#">新浪微博</a></td>
									<td><a href="#">QQ浏览器</a></td>
									<td><a href="#">企鹅FM</a></td>
								</tr>
								<tr>
									<td><a href="#"></a></td>
									<td><a href="#"></a></td>
									<td><a href="#">来电</a></td>
									<td><a href="#">星钻</a></td>
								</tr>
						</table>
							<ul id="ul-bottom">
								<li><p>Copyright © 1998- 2018 Tencent. All Rights Reserved.</p></li>
								<li><p>腾讯公司 版权所有</p></li>
							</ul>
					</div>
					
					
					
				</section>
	</body>
</html>
